<template>
	<view class="add-classfy">
		<NavBar :title="navTitle"/>
		<view class="content">
			<view class="classfy-info">
				<view class="item">
					<view class="label"> 分类名称 </view>
					<view class="value">
						<input v-model="classfyInfo.name" type="text" placeholder="请输入类型名称" placeholder-style="color:#D8D8D8;font-size:14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 排序 </view>
					<view class="value">
						<input v-model="classfyInfo.sort" type="number" placeholder="序号越大越靠前" placeholder-style="color:#D8D8D8;font-size:14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 状态 </view>
					<view class="value" @tap="changeStatus">
						<image class="v-img" src="/static/icon/mine/a-switch.png" mode="widthFix" v-if="classfyInfo.status==1"/>
						<image class="v-img" src="/static/icon/mine/switch.png" mode="widthFix" v-else/>
					</view>
				</view>
			</view>
			<view class="btn" @tap="confirm"> 保存 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { AddGoodsCategoryApi, EditGoodsCategoryApi } from '@/service/shop.js'
	const navTitle = ref('添加分类')
	const classfyInfo = ref({
		name: '',
		sort: '',
		status: 1
	})
	const isStatus = ref(true)
	const confirm = () => {
		let params = {
			...classfyInfo.value
		}
		if (navTitle.value == '添加分类') {
			AddGoodsCategoryApi(params).then(res => {
				uni.navigateBack()
			})
		} else {
			EditGoodsCategoryApi(params).then(res => {
				uni.navigateBack()
			})
		}
	}
	const changeStatus = () => {
		if(classfyInfo.value.status==1) {
			classfyInfo.value.status = 0
		} else {
			classfyInfo.value.status = 1
		}
	}
	onLoad((e) => {
		const { info } = e
		if(info) {
			const { title } = JSON.parse(info)
			navTitle.value = '编辑分类'
			classfyInfo.value = JSON.parse(info)
			classfyInfo.value.name = title
		}
	})
</script>

<style scoped lang="scss">
	.add-classfy {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.classfy-info {
			padding: 0 12px;
			border-radius: 10px;
			margin-bottom: 20px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				box-sizing: border-box;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
				.value {
					input {
						color: #333;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
					}
					.v-img {
						width: 40px;
					}
				}
			}
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			background: #FF3B1E;
			border-radius: 106px 106px 106px 106px;
		}
	}
</style>
